<template>
  <div v-for="item in navData" class="type-item">
    <div class="type-item-title">
      <svg t="1703187058551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="33827" width="30" height="30">
        <path
          d="M33.733529 191.279602m100.505419-30.214267l435.264564-130.85065q100.50542-30.214266 130.719686 70.291153l146.755009 488.169181q30.214266 100.50542-70.291153 130.719687l-435.264564 130.85065q-100.50542 30.214266-130.719686-70.291153l-146.755009-488.169182q-30.214266-100.50542 70.291153-130.719686Z"
          fill="#0F62FE" p-id="33828"></path>
        <path
          d="M288.609078 269.868228c0-49.681242 40.274835-89.956076 89.956076-89.956076h521.745241c49.681242 0 89.956076 40.274835 89.956076 89.956076v707.267655c0 21.883315-22.682425 36.394729-42.550723 27.225206l-283.775438-130.973048a58.471449 58.471449 0 0 0-49.005071 0l-283.775438 130.973048C311.291502 1013.530612 288.609078 999.019198 288.609078 977.135883V269.868228z"
          fill="#C1D0FF" fill-opacity=".4" p-id="33829"></path>
        <path
          d="M461.02489 320.843338m35.232797 0l286.360175 0q35.232796 0 35.232797 35.232797l0 0q0 35.232796-35.232797 35.232796l-286.360175 0q-35.232796 0-35.232797-35.232796l0 0q0-35.232796 35.232797-35.232797Z"
          fill="#FFFFFF" p-id="33830"></path>
      </svg>
      <span style="margin-left: 10px;">{{ item.name }}</span>
    </div>
    <div class="nav-item-content">
      <el-popover v-for="item in item.navList" placement="right" :disabled="popoverVisible(item)">
        <template #reference>
          <div class="nav-item-box" @click="handleClick(item)">
            <div class="box-title">
              <div class="logo">
                <img :src="item.logo">
              </div>
              <span class="title">{{ item.name }}</span>
            </div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </template>
        <div class="nav-item-target">
          <div class="btn" v-if="item.website">
            <el-button type="primary" plain link @click="handleTarget(item.website)">官方网站</el-button>
          </div>
          <div class="btn" v-if="item.modelscope">
            <el-button type="primary" plain link @click="handleTarget(item.modelscope)">魔塔社区</el-button>
          </div>
          <div class="btn" v-if="item.huggingface">
            <el-button type="primary" plain link @click="handleTarget(item.huggingface)">Huggingface</el-button>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>/

<script setup>
import {ref} from 'vue'
import navData from "./data"

const dialogVisible = ref(false)
const itemData = ref({})

const popoverVisible = (item) => {
  let cnt = 0
  if (item.modelscope) {
    cnt++
  }
  if (item.huggingface) {
    cnt++
  }
  if (item.website) {
    cnt++
  }
  return cnt <= 1
}

const handleClick = (item) => {
  if (popoverVisible(item)) {
    let url = item.website ||
      item.modelscope ||
      item.huggingface
    handleTarget(url)
  }
}

const handleTarget = (url) => {
  window.open(url, '_blank')
}

</script>

<style lang="scss" scoped>
$r-media-query: 'screen and (max-width: 1919px) and (min-width: 1441px)';

.nav-home {
  .type-item {
    width: 100%;
    min-width: 100%;
    margin-bottom: 20px;

    .type-item-title {
      display: flex;
      height: 60px;
      font-size: 20px;
      color: black;
      justify-content: left;
      align-items: center;
    }

    .nav-item-content {
      display: flex;
      flex-wrap: wrap;

      .nav-item-box {
        display: block;
        flex: 0 0 50%;
        max-width: 300px;
        position: relative;
        min-height: 1px;
        height: 80px;
        padding: 8px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid rgba(44, 43, 71, .06);
        border-radius: 0;
        box-shadow: 0 2px 6px 0 rgba(44, 43, 71, .05);
        cursor: pointer;
        margin: 10px;

        .box-title {
          display: flex;
          align-items: center;
          width: 100%;

          .logo {
            width: 32px;
            height: 32px;
            line-height: 32px;
            font-size: 18px;
            margin-right: 5px;
            padding: 0;
            position: relative;
            color: #624aff;
            font-weight: 400;
            letter-spacing: 0;
            opacity: .45;
            background: transparent;

            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .title {
            color: #232631;
            font-weight: 600;
            font-size: 20px;
            letter-spacing: 0;
            vertical-align: bottom;
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-word;
            line-height: 1.5715;
          }
        }

        .desc {
          -webkit-line-clamp: 2;
          flex-shrink: 0;
          height: 40px;
          margin-top: 8px;
          color: #27264d;
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
          letter-spacing: 0;
          opacity: .65;
          margin-bottom: 1em;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          word-break: break-word;
        }
      }
    }
  }
}

.nav-item-target {
  width: 100%;

  .btn {
    margin: 10px;
  }
}
</style>
